import React, { useState } from 'react';
import { connect } from 'umi';
import { Modal, Tag } from 'antd';
import { Column } from '@ant-design/charts';
import { Tabs, Space } from 'antd';
import { useEffect } from 'react';
import TagSet from './components/TagSet';
const SelectTag = (props) => {
  const { visible = false, onClose, dispatch, onSetList } = props;
  const { show = false, detail = [], sy } = visible;
  const [tabList, setTabList] = useState([]);
  const [selectList, setSelectList] = useState([]);
  const [activeKey, setActiveKey] = useState(null);
  useEffect(() => {
    if (show) {
      setSelectList(detail);
    }
  }, [show]);
  useEffect(() => {
    fetchTabList();
  }, []);
  const onChange = (e) => {
    setActiveKey(e);
  };
  const filterSelect = (e) => {
    let falg = false;
    selectList.forEach((item) => {
      if (e == item.id) {
        falg = true;
      }
    });
    return falg;
  };
  const onSelect = (data) => {
    const { id } = data;
    if (filterSelect(id)) {
      setSelectList((e) => {
        return e.filter((val) => {
          if (val.id != id) {
            return true;
          } else {
            return false;
          }
        });
      });
    } else {
      setSelectList((e) => {
        return [...e, data];
      });
    }
  };
  const modalProps = {
    title: `选择标签`,
    width: 1200,
    visible: show,
    maskClosable: true,
    destroyOnClose: true,
    zIndex: 1001,
    onOk: () => {
      onSetList(selectList);
      onClose();
    },
  };
  const fetchTabList = () => {
    dispatch({
      type: 'behaviorEecord/fetchListTagGroup',
      payload: {},
      callback: (e = []) => {
        setTabList(e);
        setActiveKey(e[0].key);
      },
    });
  };

  return (
    <Modal {...modalProps} onCancel={onClose}>
      <Tabs
        onChange={(e) => {
          onChange(e);
        }}
        activeKey={activeKey}
        items={tabList.map((item) => {
          const { groupName, id } = item;
          return {
            label: groupName,
            key: id,
            children: (
              <TagSet
                selectList={selectList}
                onSelect={onSelect}
                filterSelect={filterSelect}
                {...item}
              ></TagSet>
            ),
          };
        })}
      ></Tabs>
    </Modal>
  );
};

export default connect(({ user, loading }) => ({
  loading: loading.models.user,
}))(SelectTag);
